import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {AtSteps, AtInput, AtForm, AtTextarea, AtButton} from 'taro-ui'
import {View, Navigator} from '@tarojs/components'
import WxValidate from '../../utils/wx-validate'
import {http} from '../../utils/http'
import {PARTNER} from '../../constants/api'
import {GetRequest, vcmonitor} from "../../utils/tools";
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import './partner.scss'

export default class Partner extends Component {
  steps = [
    {title: '填写信息'},
    {title: '提交申请'},
    {title: '完成'},
  ]
  state: {
    formData: {
      real_name: string
      phone: string
      content: string
    }
    submiting: boolean
  } = {
    formData: {
      real_name: '',
      phone: '',
      content: ''
    },
    submiting: false
  }
  sid = 0

  componentDidShow() {
    vcmonitor(this)
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    const sid = Taro.getCurrentInstance().router.params.sid
    if (!sid) {
      Taro.showModal({
        title: '提示',
        content: '页面打开渠道不合法，现在为您跳转到首页',
        showCancel: false,
        success: (res) => {
          if (res.confirm) {
            Taro.switchTab({url: '/pages/index/index'})
          }
        }
      })
    }
    this.sid = parseInt(sid) || 0
  }

  inputChange(name, value) {
    const formData = this.state.formData
    formData[name] = value
    this.setState({formData})
    return value
  }

  submit() {
    const formValidate = new WxValidate({
      real_name: {required: true},
      phone: {required: true, tel: true},
      content: {required: true}
    }, {
      real_name: {required: '请填写姓名'},
      phone: {required: '请填写手机号码', tel: '手机号码不正确'},
      content: {required: '请填写合作内容'}
    })
    if (!formValidate.checkForm(this.state.formData)) {
      if (formValidate && formValidate.errorList) {
        Taro.showModal({
          content: formValidate.errorList[0].msg,
          showCancel: false
        })

      }
      return false
    }
    this.setState({submiting: true}, async () => {
      Taro.showLoading({title: '提交中...'})
      const ret = await http.post(PARTNER, {sid: this.sid, ...this.state.formData})
      setTimeout(() => {
        Taro.hideLoading()
      }, 100)
      if (ret) {
        Taro.showModal({
          title: '成功',
          content: '合作信息提交成功，即将为您转入首页',
          showCancel: false,
          success: (res) => {
            if (res.confirm) {
              if (process.env.TARO_ENV != 'h5') {
                Taro.switchTab({url: '/pages/index/index'})
              } else {
                window.location = '/pages/index/index'
              }
            }
          }
        })
      } else {
        this.setState({submiting: false})
      }
    })

  }

  render() {
    return (
      <View className='partner-out-root'>
        <GzhAuth />
        <View className='steps-box steps-box-partner'><AtSteps onChange={() => {
        }} current={0} items={this.steps}
        /></View>
        <View className='form-title-box'>合作意向信息</View>
        <AtForm>
          <AtInput onChange={this.inputChange.bind(this, 'real_name')} value={this.state.formData.real_name}
            name='real_name' type='text' title='姓名'
          />
          <AtInput onChange={this.inputChange.bind(this, 'phone')} value={this.state.formData.phone} name='phone'
            type='text' title='手机号'
          />
        </AtForm>
        <View className='form-title-box'>合作内容</View>
        <View className='text-area-box'><AtTextarea maxLength={1000} value={this.state.formData.content}
          onChange={(value) => {
                                                      const formData = this.state.formData
                                                      formData['content'] = value
                                                      this.setState({formData})
                                                    }}
        /></View>
        <View className='btn-box'>
          <AtButton type='primary'
            customStyle={`border-color:${process.env.mainColor};background-color: ${process.env.mainColor}`}
            onClick={this.submit.bind(this)}
          >提交申请</AtButton>
          <View style='height:10px;' />
          {process.env.TARO_ENV === 'weapp' &&
          <Navigator hoverClass='none' url='/pages/index/index' openType='switchTab'><AtButton type='primary'
            customStyle={`border-color:${process.env.mainColor};background-color: ${process.env.mainColor}`}
          >进入首页</AtButton></Navigator>}
          {process.env.TARO_ENV === 'h5' && <AtButton onClick={() => {
            window.location = '/pages/index/index'
          }} type='primary'
            customStyle={`border-color:${process.env.mainColor};background-color: ${process.env.mainColor}`}
          >进入首页</AtButton>}
        </View>
        <View style='height:30px;' />
      </View>
    )
  }
}
